import { IStage } from "@/interface/IStage";
import { nanoid } from "nanoid";

import { IColor, IDeviceColor } from "@/enum/shape.enum";
import { resolutionList } from "@/views/paint/layout/init";
import { Message } from "@arco-design/web-vue";

/* 切换侧边栏模式 */
export const propMode = ref(true);

export const stageObject: IStage = {
  w: 240,
  h: 128,
  id: "",
  backgroundColor: IColor.WHITE,
  scale: 1.6,
  rotate: 0,
  draggable: false,
  showRule: true,
  customSize: false,
  showSize: true,
  ghostHandle: false,
  deviceColor: IDeviceColor.BWRY,
  name: nanoid().slice(0, 8),
  resolutionId: "",
  templateId: "",
  goodsId: "",
  type: 0,
  showOutline: true,
  version: "",
  split: "0",
  subs: [],
  components: [],
  lcd: false,
  flipX: false,
  swap: false,
  placeholders: false
};

export const stageConfig = ref<IStage>({
  ...stageObject
});

export const currentStage = ref<IStage>({
  ...stageObject
});

export const resetStage = () => {
  stageConfig.value = {
    ...stageObject
  };
};

/* 是否允许粘贴 */
export const allowPaste = ref(true);

/* 属性显示的模式，用于切换组件属性和画布属性 */
const COMPONENTS_MODE = false;
const STAGE_MODE = true;

/* 更新父容器，不然拖拽出bug */
export const updateStage = ref(0);
export const viewMode = ref(STAGE_MODE);

/* 设成画布模式 */
export const setStageMode = () => {
  viewMode.value = STAGE_MODE;
};

/* 设成组件模式 */
export const setComponentMode = () => {
  viewMode.value = COMPONENTS_MODE;
};

/* 隐藏手柄，主要用于框选 */
export const toggleHandle = (flag: boolean) => {
  /* 缩放手柄 */
  const handlers = document.querySelectorAll(".handle-tl , .handle-tr , .handle-bl,.handle-br");
  Array.from(handlers).forEach((dom) => {
    const el = dom as HTMLElement;
    el.style.opacity = flag ? "1" : "0";
  });
};

/* 镂空手柄 */
export const setGhostHandle = (flag: boolean) => {
  /* 缩放手柄 */
  const handlers = document.querySelectorAll(".handle-tl , .handle-tr , .handle-bl,.handle-br");
  Array.from(handlers).forEach((dom) => {
    const el = dom as HTMLElement;
    el.style.backgroundColor = flag ? "transparent" : "var(--primary)";
  });
};
/* 用于校正画布到中心位置 */
export const offsetDom = ref({
  left: 0,
  top: 0,
  dom: null
});

/**
 * 注释: 设置子元素居中
 *
 * */
export const setChildCenter = () => {
  nextTick(() => {
    const parent = document.querySelector(".layout-content");
    if (!parent) return;
    const parentRect = parent.getBoundingClientRect();
    offsetDom.value.left =
      parentRect.width / 2 - (currentStage.value.w * currentStage.value.scale) / 2;
    offsetDom.value.top =
      parentRect.height / 2 - (currentStage.value.h * currentStage.value.scale) / 2;
  });
};

/* 设置画布大小尺寸 */
export const setStageSize = (w: number, h: number, scale: number) => {
  stageConfig.value.w = w;
  stageConfig.value.h = h;
  stageConfig.value.scale = scale;
  setChildCenter();
  updateStage.value += 1;
};

/* 设置尺寸，颜色 */
export const setStageInfo = (resolutionId: string) => {
  stageConfig.value.resolutionId = resolutionId;
};
/* 计算合适的尺寸 */
export const setPerfectScale = () => {
  const target = resolutionList.value.find((e) => {
    if (e.resolutionId === stageConfig.value.resolutionId) {
      return e;
    }
    return null;
  });
  if (!target) {
    Message.warning("error");
    return;
  }
  stageConfig.value.subs.forEach((e) => {
    e.scale = target.scale;
  });
  setChildCenter();
};
export const resetScale = () => {
  stageConfig.value.subs.forEach((e) => {
    e.scale = stageConfig.value.scale / 2;
  });
};
